<template>
	<view class="posion">
		<!-- @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"
		:style="styleObject" -->
		<image src="../static/surp.png" mode="aspectFill" class="br50" @click="goto('/pages/message/message')"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startX: 0,
				startY: 0,
				offsetX: 0,
				offsetY: 0,
				isDragging: false,
			}
		},
		computed: {
			styleObject() {
				return {
					transform: `translate(${this.offsetX}px, ${this.offsetY}px)`,
				}
			}
		},
		methods: {
			tap(e) {
				console.log(e, '啦啦啦')
			},
			// onTouchStart(event) {
			// 	console.log(event)
			// 	const touch = event.touches[0];
			// 	this.startX = touch.pageX; // 使用 pageX
			// 	this.startY = touch.pageY; // 使用 pageY
			// 	this.isDragging = true;
			// },
			// onTouchMove(event) {
			// 	console.log(event, '1')
			// 	if (!this.isDragging) return;
			// 	const touch = event.touches[0];
			// 	// 计算移动的偏移量
			// 	this.offsetX += touch.pageX - this.startX; // 使用 pageX
			// 	this.offsetY += touch.pageY - this.startY; // 使用 pageY
			// 	this.startX = touch.pageX; // 更新起始位置
			// 	this.startY = touch.pageY; // 更新起始位置
			// },
			// onTouchEnd() {
			// 	this.isDragging = false; // 拖拽结束
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.posion {
		width: 110rpx;
		height: 110rpx;
		position: absolute;
		bottom: 350rpx;
		right: 20rpx;
		z-index: 99999999;
		box-shadow: 0 0 0.5px 1px #ccc;
		border-radius: 50%;

		image {
			width: 110rpx;
			height: 110rpx;
		}
	}
</style>